﻿@{
    ViewBag.Title = "Inline Editor ";
}

@section Style{
    @Styles.Render("~/Content/Flat/Css/base")
}

@section Script{
    @Scripts.Render("~/Content/Flat/Js/inline_editor")
}
<!--main content start-->
<section id="main-content">
    <section class="wrapper">
        <!-- page start-->
        <div class="row">
            <div class="col-lg-12">
                <div class="alert alert-success fade in">
                    <button type="button" class="close close-sm" data-dismiss="alert">
                        <i class="fa fa-times"></i>
                    </button>
                    单击下面的任何元素开始编辑。
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <section class="panel">
                    <header class="panel-heading">
                        内联编辑器
                    </header>
                    <div class="panel-body">
                        <div id="editor-container">
                            <div id="header-editor">
                                <div id="headerLeft">
                                    <h2 id="sampleTitle" contenteditable="true">
                                        有才华的程序员并不需要文凭就能在顶尖的公司谋得职位的说法是错误的。
                                    </h2>
                                    <h3 contenteditable="true">
                                        这些数据可能是正确的，但是文中断章取义的说话并不恰当。
                                    </h3>
                                </div>
                                <div id="headerRight">
                                    <div contenteditable="true">
                                        <p>
                                            世界IT中心硅谷，一直以聚集了众多的编程天才而闻名。程序员受到的尊重，来自于为开源项目和社区做出的贡献，在高级的会议和事件上的演讲，以及他们写出的程序。
                                        </p>
                                        <p>
                                            硅谷最好的编程职业——无论是称心的实习生还是奖金丰厚的正式职位——都给了那些在软件开发社区活跃的人，而不是手里拿着高学历的人。知名的程序员能得到猎头推荐，受到招聘方的青睐。而招聘广告的作用往往是快速筛选掉不合格的候选人，而不是选出最优秀的人。
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div id="columns">
                                <div id="column1">
                                    <div contenteditable="true">
                                        <h3>
                                            模板
                                        </h3>
                                        <p>
                                            <strong>
                                                有才华的程序员并不需要文凭就能在顶尖的公司谋得职位的说法是错误的。
                                            </strong>
                                        </p>
                                        <p>
                                            如果我来统计这些数据，我不会参考招聘广告的要求，我更倾向于统计实际得到工作的人中的学历情况。我相信这份数据将会和<a href="#">华尔街日报</a>的大有不同
                                        </p>
                                        <blockquote>
                                            <p>
                                                硅谷最好的编程职业——无论是称心的实习生还是奖金丰厚的正式职位——都给了那些在软件开发社区活跃的人，而不是手里拿着高学历的人。知名的程序员能得到猎头推荐，受到招聘方的青睐。而招聘广告的作用往往是快速筛选掉不合格的候选人，而不是选出最优秀的人。
                                            </p>
                                        </blockquote>
                                        <blockquote>
                                            <p>
                                                你在计算机科学课上取得的好成绩一点用都没有
                                            </p>
                                        </blockquote>
                                        <p>你在计算机科学课上取得的好成绩一点用都没有.</p>
                                        <p><strike>你在计算机科学课上取得的好成绩一点用都没有.</strike></p>
                                    </div>
                                </div>
                                <div id="column2">
                                    <div contenteditable="true">
                                        <h3>
                                            Bootstrap 3.0
                                        </h3>
                                        <p>
                                            <strong>Aenean nonummy a, mattis varius. Cras aliquet.</strong>
                                            Praesent <a href="#">magna non mattis ac, rhoncus nunc</a>, rhoncus eget, cursus pulvinar mollis.
                                        </p>
                                        <p>Proin id nibh. Sed eu libero posuere sed, lectus. Phasellus dui gravida gravida feugiat mattis ac, felis.</p>
                                        <p>Integer condimentum sit amet, tempor elit odio, a dolor non ante at sapien. Sed ac lectus. Nulla ligula quis eleifend mi, id leo velit pede cursus arcu id nulla ac lectus. Phasellus vestibulum. Nunc viverra enim quis diam.</p>
                                    </div>
                                    <div contenteditable="true">
                                        <h3>
                                            Clean & Flat Concept Design
                                        </h3>
                                        <p>Donec ullamcorper, risus tortor, pretium porttitor. Morbi quam quis lectus non leo.</p>
                                        <p style="margin-left: 30px; ">Integer faucibus scelerisque. Proin faucibus at, aliquet vulputate, odio at eros. Fusce <a href="#">gravida, erat vitae augue</a>. Fusce urna fringilla gravida.</p>
                                        <p>In hac habitasse platea dictumst. Praesent wisi accumsan sit amet nibh. Maecenas orci luctus a, lacinia quam sem, posuere commodo, odio condimentum tempor, pede semper risus. Suspendisse pede. In hac habitasse platea dictumst. Nam sed laoreet sit amet erat. Integer.</p>
                                    </div>
                                </div>
                                <div id="column3">
                                    <div contenteditable="true">
                                        <p>Quisque justo neque, mattis sed, fermentum ultrices <strong>posuere cubilia Curae</strong>, Vestibulum elit metus, quis placerat ut, lectus. Ut sagittis, nunc libero, egestas consequat lobortis velit rutrum ut, faucibus turpis. Fusce porttitor, nulla quis turpis. Nullam laoreet vel, consectetuer tellus suscipit ultricies, hendrerit wisi. Donec odio nec velit ac nunc sit amet, accumsan cursus aliquet. Vestibulum ante sit amet sagittis mi.</p>
                                        <h3>
                                            Full Featured Frontend Ready
                                        </h3>
                                        <ul>
                                            <li>Ut sagittis, nunc libero, egestas consequat lobortis velit rutrum ut, faucibus turpis.</li>
                                            <li>Fusce porttitor, nulla quis turpis. Nullam laoreet vel, consectetuer tellus suscipit ultricies, hendrerit wisi.</li>
                                            <li>Mauris eget tellus. Donec non felis. Nam eget dolor. Vestibulum enim. Donec.</li>
                                        </ul>
                                        <p>Quisque justo neque, mattis sed, <a href="#">fermentum ultrices posuere cubilia</a> Curae, Vestibulum elit metus, quis placerat ut, lectus.</p>
                                        <p>Nullam laoreet vel, consectetuer tellus suscipit ultricies, hendrerit wisi. Ut sagittis, nunc libero, egestas consequat lobortis velit rutrum ut, faucibus turpis. Fusce porttitor, nulla quis turpis.</p>
                                        <p>Donec odio nec velit ac nunc sit amet, accumsan cursus aliquet. Vestibulum ante sit amet sagittis mi. Sed in nonummy faucibus turpis. Mauris eget tellus. Donec non felis. Nam eget dolor. Vestibulum enim. Donec.</p>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </section>

            </div>
        </div>
        <!-- page end-->
    </section>
</section>
<!--main content end-->